<script setup lang="ts">
import { computed } from 'vue';
import { showConfirmDialog, showNotify } from 'vant';
import { cancelCubicleReservation } from "@/apps/client/utils/roomApi";
import { getUserInfo } from "@/apps/client/utils/userApi";
import { canCheckInNow, canCheckOutNow, isNow, isStartBefore} from "@/apps/client/utils/recordStatusUtil";
import router from "@/apps/client/router.js";

const props = defineProps<{ data: any }>();
const data = props.data;
const reservationId = data.id;

const emit = defineEmits<{
  (event: 'cancel'): void;
}>();

// 是否可签到
function canClockIn() {
  return data.status === "APPROVED" && !data.clockIn && canCheckInNow(data);
}

// 是否可签退
function canClockOut() {
  return data.status === "APPROVED" && data.clockIn && !data.clockOut && canCheckOutNow(data);
}

// 是否可取消预约
function canCancel() {
  return data.status === "PENDING" || (data.status === "APPROVED" && isStartBefore(data));
}

// 点击签到
function signedIn() {
  if (data.clockIn) {
    showNotify({ type: 'warning', message: '已签到，无需重复操作' });
    return;
  }
  if (!canClockIn()) {
    //showNotify({ type: 'warning', message: '当前不可签到' });
    return;
  }
  sessionStorage.setItem("op", "in");
  sessionStorage.setItem("reservation", JSON.stringify(data));
  router.push({ name: "qrcodeScanner" });
}

// 点击签退
function signedOut() {
  if (data.clockOut) {
    showNotify({ type: 'warning', message: '已签退，无需重复操作' });
    return;
  }
  if (!canClockOut()) {
    //showNotify({ type: 'warning', message: '当前不可签退' });
    return;
  }
  sessionStorage.setItem("op", "out");
  sessionStorage.setItem("reservation", JSON.stringify(data));
  router.push({ name: "qrcodeScanner" });
}

// 取消预约
async function cancel() {
  if (!canCancel()) return;

  try {
    await showConfirmDialog({ title: '提示', message: "确定取消预约" });
    const body = await cancelCubicleReservation({ reservationId });
    if (body.code === 200) {
      showNotify({ type: 'success', message: '取消预约成功' });
      const userInfo = await getUserInfo();
      if (userInfo.data) {
        sessionStorage.setItem("points", userInfo.data.points);
      }
      emit('cancel');
    } else {
      showNotify({ message: body.msg });
    }
  } catch {
    // 用户取消操作，不做处理
  }
}

// 星期映射
const dayOfWeekMap = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
const reservationDayOfWeek = computed(() => {
  const date = new Date(data.reservationDate);
  return dayOfWeekMap[date.getDay()];
});
</script>

<template>
  <div style="padding: 0 16px">
    <div style="display: flex; justify-content: space-between; font-size: 0.85rem;">
      <p>预约时间：{{ data.reservationDate }} {{ reservationDayOfWeek }}</p>
      <p>{{ data.startTime }} - {{ data.endTime }}</p>
    </div>
    <div style="display: flex; justify-content: space-between; font-size: 0.85rem;">
      <p>创建时间：{{ data.createDate }}</p>
      <p>预约人：{{ data.realName }}</p>
    </div>
  </div>

  <van-cell>
    <van-grid :border="false" column-num="3" style="--van-grid-item-content-padding: 0;">
      <!-- 签到 -->
      <van-grid-item
          icon="scan"
          text="扫码签到"
          :class="['grid-btn', { completed: data.clockIn, active: canClockIn() }]"
          clickable
          @click="signedIn"
      />

      <!-- 签退 -->
      <van-grid-item
          icon="scan"
          text="扫码签退"
          :class="['grid-btn', { completed: data.clockOut, active: canClockOut() }]"
          clickable
          @click="signedOut"
      />

      <!-- 取消预约 -->
      <van-grid-item
          icon="qr-invalid"
          text="取消预约"
          :class="['grid-btn', { danger: canCancel() }]"
          :clickable="canCancel()"
          @click="canCancel() && cancel()"
      />
    </van-grid>
  </van-cell>
</template>

<style scoped>
p {
  margin: 6px 0;
}

.grid-btn .van-icon {
  color: #ccc; /* 默认灰色 */
}

.grid-btn.active .van-icon {
  color: #46afff; /* 可操作状态 - 蓝色 */
}

.grid-btn.completed .van-icon {
  color: #20c997; /* 已完成 - 绿色 */
}

.grid-btn.danger .van-icon {
  color: #ff4d4f; /* 可取消 - 红色 */
}

.grid-btn.completed,
.grid-btn.active,
.grid-btn.danger {
  transition: color 0.3s ease;
}

.grid-btn.completed {
  color: #20c997;
}

.grid-btn.active {
  color: #46afff;
}

.grid-btn.danger {
  color: #ff4d4f;
}
</style>
